<template>
    <div>
        <div class="not-order" v-if="orderList.length == 0">
            <el-empty description="暂无订单，推荐您去首页选购!"
                ><el-button type="primary" @click="$router.push('/')"
                    >去首页</el-button
                ></el-empty
            >
        </div>
        <div class="order-all" v-else>
            <div class="desc">
                <span>订单编号</span>
                <span>订单状态</span>
                <span>订单总价</span>
            </div>
            <div class="container" v-for="item in orderList">
                <el-image
                    src="https://img.tianzhongli.shop/i/2023/03/14/default.webp"
                />
                <span>{{ item.order_id }}</span>
                <span>{{ item.current }}</span>
                <span style="color: red; font-size: 16px"
                    >￥{{ item.total_price }}</span
                >
                <span
                    style="cursor: pointer"
                    @click="
                        $router.push({
                            path: '/order',
                            query: {
                                current: 1,
                                order_id: item.order_id,
                            },
                        })
                    "
                >
                    查看详情</span
                >
            </div>
        </div>
    </div>
</template>

<script setup>
const { orderList } = defineProps(['orderList'])
orderList.forEach(e => {
    if (e.is_pay == 1) {
        e.current = '已下单'
    } else if (e.is_pay == 2) {
        e.current = '已付款'
    }
})
</script>

<style lang="scss" scoped>
.order-all {
    .desc {
        color: rgb(145, 145, 145);
        font-size: 16px;
        display: flex;
        > span {
            &:nth-child(1) {
                margin-left: 230px;
            }
            &:nth-child(2) {
                margin-left: 145px;
            }
            &:nth-child(3) {
                margin-left: 123px;
            }
        }
    }
    .container {
        .el-image {
            width: 60px;
            transition: all 0.3s ease;
        }
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        border-bottom: 1px solid silver;
        transition: all 0.3s ease;
        &:nth-child(2) {
            border-top: 1px solid silver;
        }
        &:hover {
            .el-image {
                opacity: 0.5;
            }
            background-color: aliceblue;
        }
        > span {
            &:nth-child(2) {
                margin-left: 130px;
            }
            &:nth-child(3) {
                margin-left: 130px;
            }
            &:nth-child(4) {
                margin-left: 130px;
                width: 100px;
            }
            &:nth-child(5) {
                width: 150px;
                text-align: right;
            }
        }
    }
}
</style>
